<template>
  <div class="couponBack">
      <div  class="couponMech">
        <p class="mechName">
          {{coupons[0].mchtName}}
        </p>
        <p class="area">
          <span> {{coupons[0].mchtArea}} </span>
          <span> {{coupons[0].distance | setDistance}} </span>
        </p>
      </div>
      <div class="couponLine"><img src="../../../images/line.png" alt=""></div>
      <div id="couponInfo" class="couponInfo">
          <div
            class="couponDiv" :class="{'coupon_yellow':coupons[0].couponType=='cash','coupon_green':coupons[0].couponType=='rebate','coupon_blue':coupons[0].couponType=='voucher','coupon_orange':coupons[0].couponType=='present','coupon_purple':coupons[0].couponType=='ticket'}">
              <div class="_num" :class="{'coupon_color_y':coupons[0].couponType=='cash','coupon_color_g':coupons[0].couponType=='rebate','coupon_color_b':coupons[0].couponType=='voucher','coupon_color_o':coupons[0].couponType=='present','coupon_color_p':coupons[0].couponType=='ticket'}">Coupon</div>
              <div class="_num_price">
                  <coupon-number :num="coupons[0].denomination" :type="coupons[0].couponType"></coupon-number>
              </div>
              <div class="coupon_type">{{coupons[0].couponType | couponTp}}</div>
          </div>
          <div class="info">
              <p class="couponName">{{coupons[0].couponName}}</p>
              <div class="couponComment">
                  <p class="star_con">
                     <coupon-star :couponComScore="coupons[0].couponComScore"></coupon-star>
                  </p>
                  <p class="couponNum color_gray">{{coupons[0].couponComNum}}条 &nbsp;&nbsp;{{coupons[0].type | couponTp}}共<span> {{coupons[0].num}} </span>张</p>
              </div>

              <div class="couponNum_bottom" style="">
                  已出售  {{coupons[0].soldnum}} &nbsp;&nbsp;&nbsp;&nbsp; 已使用  {{coupons[0].usednum}}
              </div>
          </div>
      </div>
    </div>
</template>

<script>
import CouponCard from 'src/pages/coupon/shareList/coupon.vue'
export default {
  data: () => ({}),
  components: {CouponCard},
  props: {
    coupons: [Array],
  },
    mounted() {
        let str= navigator.userAgent.toLowerCase();
        let ver=str.match(/cpu iphone os (.*?) like mac os/);
        if(!ver){
            document.getElementById("couponInfo").style.transform="translateY(-0.2rem)";
            document.getElementById("coupon_shadow").style.transform="translateY(-0.2rem)"
        }
}
}

</script>

<style lang="scss" scoped>
.couponBack {
  position: relative;
  // margin-bottom: 2rem;
  z-index: 200;
}
.couponMech {
  padding: 0.8rem 0.6rem 0.2rem;
  background-color: #fff;
  border-radius: .2rem .2rem 0 0;
  .mechName {
    float: left;
    font-size:1rem;
    color: #333;
  }
  .area {
    float: right;
    color: #666;
    font-size: 0.8rem;
  }
  &:after{
    content: '';
    display: block;
    clear: both;
  }
}
.couponLine {
  height: 1.35rem;
  transform: translate(0, -0.04px);
  width: 100%;
  img {
    max-width: 100%;
  }
}
.couponInfo {
  padding-top: 0.8rem;
  background-color: #fff;
  border-radius:  0 0 .2rem .2rem;
  padding: 0 0.6rem 0.8rem;
  background-color: #fff;
  .info {
    overflow: hidden;
    padding: .4rem 0 0 .667rem;
    line-height: 2rem;
  }
  .couponName {
    font-size: 1rem;
    color: #333;
  }
  .couponComment {
    line-height: 1.2rem;
    font-size: .8rem;
    color: #666;
    overflow: hidden;
  }
  .couponNum {
    padding-left: .8rem;
    overflow: hidden;
    line-height: 1.2rem;
    font-size: 0.8rem;
    color: #999;
    margin-top: 0.2rem;
    span {
      color: #ff0000;
    }
  }
  .couponNum_bottom {
    overflow: hidden;
    line-height: 1.2rem;
    font-size: 0.8rem;
    color: #999;
    margin-top: 0.3rem;
  }
}

</style>
